<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="考生-员工" name="admin">
          <div class="header">
            <div>
              <el-select v-model="searchTerms.typeId" placeholder="考生分组" class="select" clearable @change="getData">
                <el-option v-for="item in teamList['admin']" :key="item.id" :value="item.id" :label="item.name"/>
              </el-select>
              <el-input v-model="searchTerms.searchValue" placeholder="请输入考生名称" class="search-input" @change="getData"/>
              <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
            </div>
            <div>
              <el-button v-if="queryMatch(192)" type="warning" @click="toAddToTeam">添加到分组</el-button>
              <el-button v-if="queryMatch(193)" type="primary" @click="toManageTeam">分组管理</el-button>
            </div>
          </div>
          <el-table
            v-loading="tableLoading"
            ref="multipleTable"
            :data="tableData"
            :max-height="tableMaxHeight"
            border
            highlight-current-row
            @sort-change="handleSortChange"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="id" label="ID" width="100" header-align="center" align="center" sortable/>
            <el-table-column prop="name" label="姓名" min-width="120" header-align="center" align="center"/>
            <el-table-column prop="sex" label="性别" min-width="100" header-align="center" align="center"/>
            <el-table-column prop="mobile" label="手机" min-width="140" header-align="center" align="center"/>
            <el-table-column prop="email" label="邮箱" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="position" label="部门" min-width="140" header-align="center" align="center"/>
            <el-table-column prop="group_name" label="分组" width="320" header-align="center" align="center">
              <template slot-scope="scope">
                <el-tag v-for="item in scope.row['group_name']" :key="item" type="warning" style="margin: 2px;">{{ item }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" header-align="center" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" size="small" icon="el-icon-search" circle @click="toExamineeInfo(scope.row)"/>
                <el-tooltip v-if="queryMatch(192)" placement="top" content="添加到分组">
                  <el-button type="warning" size="small" icon="el-icon-share" circle
                             @click="toSingerAddToTeam(scope.row)"/>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"/>
        </el-tab-pane>
        <el-tab-pane label="考生-客户" name="member">
          <div class="header">
            <div>
              <el-select v-model="searchTerms.typeId" placeholder="考生分组" class="select" clearable @change="getData">
                <el-option v-for="item in teamList['member']" :key="item.id" :value="item.id" :label="item.name"/>
              </el-select>
              <el-input v-model="searchTerms.searchValue" placeholder="请输入考试名称" class="search-input" @change="getData"/>
              <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
            </div>
            <div>
              <!--<el-button type="danger" @click="toBatchDelete">批量删除</el-button>-->
              <el-button type="warning" @click="toAddToTeam">添加到分组</el-button>
              <el-button type="primary" @click="toManageTeam">分组管理</el-button>
            </div>
          </div>
          <el-table
            v-loading="tableLoading"
            ref="multipleTable"
            :data="tableData"
            :max-height="tableMaxHeight"
            border
            highlight-current-row
            @sort-change="handleSortChange"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="id" label="ID" width="100" header-align="center" align="center" sortable/>
            <el-table-column prop="name" label="姓名" min-width="120" header-align="center" align="center"/>
            <el-table-column prop="level" label="客户等级" min-width="100" header-align="center" align="center"/>
            <el-table-column prop="mobile" label="手机" min-width="140" header-align="center" align="center"/>
            <el-table-column prop="email" label="邮箱" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="company" label="公司" min-width="140" header-align="center" align="center"/>
            <el-table-column prop="group_name" label="分组" width="320" header-align="center" align="center">
              <template slot-scope="scope">
                <el-tag v-for="item in scope.row['group_name']" :key="item" type="warning" style="margin: 2px;">{{ item }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" header-align="center" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" size="small" icon="el-icon-search" circle @click="toExamineeInfo(scope.row)"/>
                <el-tooltip placement="top" content="添加到分组">
                  <el-button type="warning" size="small" icon="el-icon-share" circle
                             @click="toSingerAddToTeam(scope.row)"/>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" title="考生分组" width="500px" class="dialog" center>
      <div class="content">
        <div class="text">将所选 {{ multipleSelection.length }} 位用户添加至</div>
        <el-select v-model="transfer.groupIds" placeholder="请选择分组" filterable multiple>
          <el-option v-for="item in activeName==='admin'?teamList['admin']:teamList['member']" :key="item.id"
                     :value="item.id" :label="item.name"/>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="doTransfer">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { handleSortChange, handleSizeChange, handleCurrentChange, parseTime } from '@/utils/table'

export default {
  data() {
    return {
      activeName: 'admin',
      downloadLoading: false,
      searchTerms: {
        typeId: '',
        searchValue: ''
      },

      // 分组列表
      teamList: {
        member: [],
        admin: []
      },

      dialogVisible: false,
      transfer: {
        examineeIds: [],
        groupIds: []
      },

      // 表格相关数据
      tableMaxHeight: document.documentElement.clientHeight - 380,
      tableLoading: false,
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      pageSizes: [10, 20, 50, 100, 1000],
      total: 0,
      tableData: [],
      multipleSelection: []
    }
  },
  created() {
    this.getData();
    this.getTeamList();
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, parseTime,

    handleTabClick(tab, event) {
      this.currentPage = 1;
      this.multipleSelection = [];
      this.getData();
    },

    getData(order) {
      this.tableLoading = true
      order || (order = {})
      const url = 'exam/examineeList'
      const data = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        search: this.searchTerms.searchValue,
        type: this.activeName,
        typeId: this.searchTerms.typeId
      }
      order.sortName && (data.sortName = order.sortName)
      order.sortOrder && (data.sortOrder = order.sortOrder)
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data.rows
        for (const i in this.tableData) {
          this.tableData[i]['group_name'] = this.tableData[i]['group_name'].split('/');
        }
        this.total = res.data.total
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    // 获取分组列表
    getTeamList() {
      const url = 'exam/examineeGroupList'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.teamList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    toExamineeInfo(row) {
      if (this.activeName === 'admin') {
        const query = { title: '员工信息', id: row.id }
        this.$router.push({
          path: '/permissions/users/userInfo',
          query: query
        })
      } else {
        const query = { title: '客戶信息', id: row.id }
        this.$router.push({
          path: '/user/userlist/modify',
          query: query
        })
      }
    },

    // table多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    toBatchDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择要删除的客户')
        this.dialogVisible = false
      } else {
        this.$confirm('此操作将删除所选考生, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // const url = 'customer/deleteall'
          const data = {
            id: []
          }
          this.multipleSelection.forEach(item => {
            data.id.push(item.id)
          })
          data.id = data.id.join(',')
          // this.$store.dispatch('GetConnect', { url, data }).then(res => {
          //   this.$message.success(res.msg)
          //   this.getData()
          // }).catch((err) => {
          //   this.$message.error(err.msg)
          // })
        })
      }
    },

    toSingerAddToTeam(e){
      this.dialogVisible = true;
      this.multipleSelection.push(e);
      this.transfer = {
        examineeIds: [],
        groupIds: []
      }
    },

    toAddToTeam() {
      this.dialogVisible = true
      this.transfer = {
        examineeIds: [],
        groupIds: []
      }
    },

    toManageTeam() {
      this.$router.push({
        path: '/exam/examineeTeam',
        query: {
          type: this.activeName === 'admin' ? 1 : 0
        }
      })
    },

    doTransfer() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择要转移的考生')
        this.dialogVisible = false
      } else if (this.transfer.toId === '') {
        this.$message.error('请选择要将考生指派给哪个销售')
      } else {
        const url = 'exam/examineeGroup'
        const data = {
          examineeIds: [],
          groupIds: this.transfer.groupIds
        }
        this.multipleSelection.forEach(item => {
          data.examineeIds.push(item.id)
        })
        data.groupIds = data.groupIds.join(',');
        data.examineeIds = data.examineeIds.join(',')
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg)
          this.dialogVisible = false
          this.getData()
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../../styles/index.scss';
.box-1 {
  .model {
    .el-card {
      color: #fff;
      background-color: $panGreen;
      span {
        font-size: 14px;
      }
      div {
        font-size: 24px;
        margin-top: 10px;
      }
    }
  }
  .header {
    @include flex-row(center, space-between);
    flex-wrap: wrap;
    padding-bottom: 15px;
    div {
      @include flex-row(center, flex-start);
      flex-wrap: wrap;
      .select {
        padding-right: 15px;
        width: 150px;
      }
      .picker {
        margin-right: 15px;
        width: 300px;
      }
      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
      .search-input {
        width: 180px;
      }
    }
  }
}
.dialog {
  .content {
    text-align: center;
    .el-select {
      width: 300px;
    }
    .text {
      padding-bottom: 20px;
      .el-radio-group {
        padding-left: 15px;
      }
    }
  }
}
</style>

